<template>
    <div class="detail_wrapper">
        <page-header-com>订单详情</page-header-com>

        <!-- 订单状态 -->
        <div class="order_status">
            <img class="status_img" src="../assets/font/yitoudi.svg" alt="" />
            <span class="status_text">快递投递中</span>

            <!-- <img class="status_img" src="../assets/font/daishouhuo.svg" alt="">
            <span class="status_text">待发货</span> -->

            <!-- <img class="status_img" src="../assets/font/guanbi.svg" alt="">
            <span class="status_text">交易关闭</span> -->

            <!-- 收货人地址 -->
            <div class="user_address">
                <nut-row>
                    <nut-col :span="5">
                        <div class="flex-content dingwei">
                            <img src="../assets/images/dingwei.png" alt="" />
                        </div>
                    </nut-col>
                    <nut-col :span="17">
                        <div class="flex-content flex-content-light">
                            <div class="user_info">
                                <span class="user_name" v-if="isRender">{{
                                    targetAddress.name
                                }}</span
                                >&nbsp;
                                <span class="user_phone" v-if="isRender">{{
                                    targetAddress.phone
                                }}</span>
                            </div>
                            <div class="user_detail_address" v-if="isRender">
                                {{ targetAddress.area_name }} <br />
                                {{ targetAddress.desc }}
                            </div>
                        </div>
                    </nut-col>
                </nut-row>
            </div>
        </div>

        <!-- 占位盒子 -->
        <div class="zhanwei"></div>

        <!-- 物流信息，根据跳转来的路由参数动态渲染 -->
        <div class="logistics">
            <router-link
                :to="{
                    name: 'logisticsdetails',
                    params: {
                        logistics: JSON.stringify(logisticsInfo),
                    },
                }"
            >
                <nut-row type="flex" justify="space-between">
                    <nut-col :span="4">
                        <div class="flex-content wuliu_imgbox">
                            <img
                                class="wuliu_img"
                                src="../assets/images/wuliu.png"
                                alt=""
                            />
                        </div>
                    </nut-col>
                    <nut-col :span="17">
                        <div
                            class="
                                flex-content flex-content-light
                                wuliu_info_box
                            "
                            v-if="isRender"
                        >
                            <div class="wuliu_info">
                                {{ logisticsInfo[0].context }}
                            </div>
                            <div class="wuliu_time">
                                {{ logisticsInfo[0].time }}
                            </div>
                        </div>
                    </nut-col>
                    <nut-col :span="2">
                        <div class="flex-content">
                            <div class="flex-content arrow">&gt;</div>
                        </div>
                    </nut-col>
                </nut-row>
            </router-link>
        </div>

        <!-- 商品卡片 -->
        <div class="products_card">
            <div class="card_hd">OMINI定制</div>
            <!-- 商品卡片 -->
            <div
                class="card_con"
                v-for="item in targetOrder.goods_info"
                :key="item.id"
            >
                <nut-row>
                    <nut-col :span="8">
                        <div class="flex-content con_img">
                            <img
                                :src="item.s_goods_photos[0].path"
                                v-if="isRender"
                                alt=""
                            />
                        </div>
                    </nut-col>
                    <nut-col :span="8">
                        <div class="flex-content flex-content-light">
                            <div class="con_title" v-if="isRender">
                                {{ item.goods_name }}
                            </div>
                            <div class="con_size">淡金色 【10cm】</div>
                            <nut-tag color="#F0D5B8">七天换货</nut-tag>
                        </div>
                    </nut-col>
                    <nut-col :span="8">
                        <div class="flex-content right">
                            <div class="con_money" v-if="isRender">
                                ￥{{ item.price }}
                            </div>
                            <div class="con_num" v-if="isRender">
                                x{{ item.num || 1 }}
                            </div>
                        </div>
                    </nut-col>
                </nut-row>
            </div>
            <!-- 订单总价 -->
            <nut-row type="flex" justify="space-between" class="payfor">
                <nut-col :span="6">
                    <div class="flex-content">商品总价</div>
                </nut-col>
                <nut-col :span="6">
                    <div class="flex-content right" v-if="isRender">
                        ￥{{
                            targetOrder.goods_info[0].price *
                            (targetOrder.goods_info[0].num || 1)
                        }}
                    </div>
                </nut-col>
            </nut-row>
            <nut-row type="flex" justify="space-between" class="payfor">
                <nut-col :span="6">
                    <div class="flex-content">运费（快递）</div>
                </nut-col>
                <nut-col :span="6">
                    <div class="flex-content right">￥0.00</div>
                </nut-col>
            </nut-row>
            <nut-row type="flex" justify="space-between" class="total">
                <nut-col :span="6">
                    <div class="flex-content">订单总价</div>
                </nut-col>
                <nut-col :span="6">
                    <div class="flex-content right" v-if="isRender">
                        ￥{{ targetOrder.total_price }}
                    </div>
                </nut-col>
            </nut-row>
        </div>

        <!-- 订单信息 -->
        <div class="order_info">
            <div class="info_hd">订单信息</div>
            <nut-row type="flex" justify="space-between" class="info_item">
                <nut-col :span="6">
                    <div class="flex-content">订单编号:</div>
                </nut-col>
                <nut-col :span="10">
                    <div class="flex-content right" v-if="isRender">
                        {{ targetOrder.order_id }}
                    </div>
                </nut-col>
                <nut-col :span="6"></nut-col>
            </nut-row>
            <nut-row type="flex" justify="space-between" class="info_item">
                <nut-col :span="6">
                    <div class="flex-content">支付宝交易号:</div>
                </nut-col>
                <nut-col :span="10">
                    <div class="flex-content right">24354657678909</div>
                </nut-col>
                <nut-col :span="6"></nut-col>
            </nut-row>
            <nut-row type="flex" justify="space-between" class="info_item">
                <nut-col :span="6">
                    <div class="flex-content">创建时间:</div>
                </nut-col>
                <nut-col :span="10">
                    <div class="flex-content right" v-if="isRender">
                        {{ targetOrder.createdAt }}
                    </div>
                </nut-col>
                <nut-col :span="6"></nut-col>
            </nut-row>
            <nut-row type="flex" justify="space-between" class="info_item">
                <nut-col :span="6">
                    <div class="flex-content">成交时间:</div>
                </nut-col>
                <nut-col :span="10">
                    <div class="flex-content right" v-if="isRender">
                        {{ targetOrder.createdAt }}
                    </div>
                </nut-col>
                <nut-col :span="6"></nut-col>
            </nut-row>
        </div>

        <!-- 底部按钮 -->
        <div class="footer">
            <nut-button color="#C1AB96" size="small" plain>联系卖家</nut-button>
            <nut-button class="footer_btn" color="#C1AB96" size="small" plain
                >申请售后</nut-button
            >
        </div>
    </div>
</template>

<script>
import { getSingleOrder } from "../api/order";
import { getMyAddress, createLogistics, getLogistics } from "../api/address";
import { mapMutations, mapState } from "vuex";
export default {
    name: "orderDetailView",
    data() {
        return {
            // 当前订单
            targetOrder: "",
            // 当前订单地址
            targetAddress: "",
            // 物流信息
            logisticsInfo: [],
            // 控制是否渲染
            isRender: false,
        };
    },
    methods: {
        // 存储当前订单 id
        ...mapMutations(["setOrderDetailId"]),
    },
    computed: {
        // 当前订单 id
        ...mapState(["orderDetailId"]),
    },
    async created() {
        // 路由传递来的 当前订单id
        let id = this.$route.params.order_id || this.orderDetailId;
        if (id) {
            this.setOrderDetailId(id);
        }
        // 获取单个订单
        const { data } = await getSingleOrder(id);
        this.targetOrder = data.result;
        console.log(this.targetOrder);

        // 获取我的地址
        const res = await getMyAddress();
        this.targetAddress = res.data.result.find(
            (ele) => ele.id == this.targetOrder.addr_id
        );

        // 获取我的物流信息（先创建，再获取）
        await createLogistics(this.targetOrder.order_id);
        const logInfo = await getLogistics(this.targetOrder.order_id);
        this.logisticsInfo = logInfo.data.data;
        console.log(this.logisticsInfo);

        // 开始渲染
        this.isRender = true;
    },
};
</script>

<style lang="scss" scoped>
a {
    display: block;
    text-decoration: none;
}
.detail_wrapper {
    height: 120vh;
    background-color: #eae9e5;
}
// 订单状态
.order_status {
    position: relative;
    display: flex;
    box-sizing: border-box;
    padding-top: 5.333vw;
    height: 26.667vw;
    background-color: #c1ab96;
    // background-color: #921b31;

    .status_img {
        width: 5.333vw;
        height: 5.333vw;
        margin: 0 2.133vw;
    }
    span {
        color: #fff;
        font-size: 3.733vw;
    }
    .user_address {
        display: flex;
        align-items: center;
        position: absolute;
        left: 50%;
        bottom: -11.467vw;
        transform: translateX(-50%);
        width: 90.667vw;
        height: 22.933vw;
        border-radius: 2.667vw;
        background-color: #fff;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 2.667vw 4vw -0.8vw,
            rgba(0, 0, 0, 0.05) 0px 1.067vw 1.6vw -0.533vw;
        .dingwei {
            margin: 1.333vw 0 0 3.467vw;
            width: 12.267vw;
            height: 12.267vw;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .user_name,
        .user_detail_address {
            color: #000;
        }
        .user_detail_address {
            overflow: hidden;
            line-height: 1.7;
            height: 11.2vw;
        }
        .user_phone {
            color: #999;
        }
    }
}
// 占位
.zhanwei {
    height: 16vw;
    background-color: #fff;
}
// 物流信息
.logistics {
    box-sizing: border-box;
    padding: 0 4.267vw;
    height: 18.667vw;
    background-color: #fff;

    .wuliu_imgbox {
        margin: 2.133vw 0 0 1.6vw;
    }
    .wuliu_img {
        width: 12.267vw;
        height: 12.267vw;
    }
    .wuliu_info_box {
        margin-top: 1.6vw;
    }
    .wuliu_info {
        height: 9.6vw;
        color: #f0d5b8;
    }
    .wuliu_time {
        margin-top: 0.8vw;
        color: #999;
    }
    .arrow {
        margin-top: 3.2vw;
        margin-left: 3.2vw;
        color: #999;
        font-size: 6.933vw;
    }
}
// 商品卡片
.products_card {
    margin-top: 16px;
    padding: 2.133vw 2.667vw;
    background-color: #fff;
    .card_hd {
        font-size: 4.8vw;
    }
    .card_con {
        height: 26.667vw;
        font-size: 3.733vw;
        .con_img {
            width: 26.667vw;
            height: 26.667vw;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .con_title {
            width: 40vw;
            height: 11.2vw;
            overflow: hidden;
        }
        .con_size {
            margin: 2.133vw 0;
            font-size: 3.2vw;
            color: #999;
        }
        &:nth-child(n + 2) {
            margin-top: 1.6vw;
        }
    }
    .right {
        text-align: right;
    }
    .payfor {
        margin-top: 2.133vw;
        font-size: 3.2vw;
        color: #999;
    }
    .total {
        margin-top: 2.133vw;

        font-size: 3.733vw;
    }
}
// 订单信息
.order_info {
    margin-top: 4.267vw;
    padding: 2.133vw 2.667vw;
    background-color: #fff;
    .info_hd {
        font-size: 3.733vw;
    }
    .info_item {
        margin-top: 2.667vw;
        font-size: 3.2vw;
        color: #999;
    }
}
// 底部按钮
.footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    bottom: 0;
    width: 100vw;
    height: 14.933vw;
    background-color: #fff;
    .footer_btn {
        margin: 0 2.667vw;
    }
}
</style>